<nz-spin [nzSpinning]="_isSpinning">
  <archives-top [ifs]="true"></archives-top>
  <div class="currentLocation">
    <div class="mainBox">
      <nz-breadcrumb>
        <nz-breadcrumb-item>
          <i class="anticon anticon-home"></i>
          <a routerLink="/archives"><span>数字档案馆</span></a>
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          <span>档案征集</span>
        </nz-breadcrumb-item>
      </nz-breadcrumb>
    </div>
  </div>
  <div class="showCen">
    <div class="mainBox cc">
      <cite class="cluelogo"></cite>
      <div class="clueTop">
        <h4>征集人信息</h4>
      </div>
      <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm($event,validateForm.value)" class="formBox cc">
        <div style="padding-bottom: 20px">
          <div nz-form-item class="tdfor">
            <div nz-form-label class="labelfor lt">
              <label for="name" nz-form-item-required>姓名</label>
            </div>
            <div nz-form-control nzHasFeedback [nzValidateStatus]="getFormControl('name')" class="lt inputw" >
              <nz-input  [nzSize]="'large'" formControlName="name" [nzId]="'name'"></nz-input>
              <div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('required')">请输入你的姓名！</div>
            </div>
          </div>
          <div nz-form-item class="tdfor">
            <div nz-form-label class="labelfor lt">
              <label for="email" nz-form-item-required>邮箱</label>
            </div>
            <div nz-form-control nzHasFeedback [nzValidateStatus]="getFormControl('email')" class="lt inputw">
              <nz-input [nzSize]="'large'" formControlName="email" [nzId]="'email'"></nz-input>
              <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('email')">输入不是有效的电子邮件！</div>
            </div>
          </div>
          <div nz-form-item class="tdfor">
            <div nz-form-label class="labelfor lt">
              <label for="mobile" nz-form-item-required>手机号码</label>
            </div>
            <div nz-form-control nzHasFeedback [nzValidateStatus]="getFormControl('mobile')" class="lt inputw">
              <nz-input-group [nzSize]="'large'" [nzCompact]="true" class="inputw">
                <input formControlName="mobile" id="'mobile'" nz-input>
              </nz-input-group>
              <div nz-form-explain *ngIf="getFormControl('mobile').dirty&&getFormControl('mobile').hasError('required')">请输入您的电话号码！</div>
              <div nz-form-explain *ngIf="getFormControl('mobile').dirty&&getFormControl('mobile').hasError('confirm')">请输入正确的电话号码！</div>
            </div>
          </div>
          <div nz-form-item class="tdfor">
            <div nz-form-label class="labelfor lt">
              <label for="address" nz-form-item-required>居住地址</label>
            </div>
            <div nz-form-control nzHasFeedback [nzValidateStatus]="getFormControl('address')" class="lt inputw" >
              <nz-input  [nzSize]="'large'" formControlName="address" [nzId]="'address'"></nz-input>
              <div nz-form-explain *ngIf="getFormControl('address').dirty&&getFormControl('address').hasError('required')">请输入你的居住地址！</div>
            </div>
          </div>
          <div style="width: 850px;height: 1px;border-bottom: 1px dashed #aa6f23;float: left;margin-bottom: 50px;margin-top: 20px"></div>
          <div nz-form-item class="tdfor">
            <div nz-form-label class="labelfor lt">
              <label for="title" nz-form-item-required>档案名</label>
            </div>
            <div nz-form-control nzHasFeedback [nzValidateStatus]="getFormControl('title')" class="lt inputw" >
              <nz-input  [nzSize]="'large'" formControlName="title" [nzId]="'title'"></nz-input>
              <div nz-form-explain *ngIf="getFormControl('title').dirty&&getFormControl('title').hasError('required')">请输入档案名！</div>
            </div>
          </div>
          <div nz-form-item class="tdfor">
            <div nz-form-label class="labelfor lt">
              <label for="archive" nz-form-item-required>所属档案馆</label>
            </div>
            <div nz-form-control nzHasFeedback [nzValidateStatus]="getFormControl('archive')" class="lt inputw" >
              <nz-input  [nzSize]="'large'" formControlName="archive" [nzId]="'archive'"></nz-input>
              <div nz-form-explain *ngIf="getFormControl('archive').dirty&&getFormControl('archive').hasError('required')">请输入所属档案馆！</div>
            </div>
          </div>
          <div nz-form-item class="tdfor">
            <div nz-form-label class="labelfor lt">
              <label for="number" nz-form-item-required>档号</label>
            </div>
            <div nz-form-control nzHasFeedback [nzValidateStatus]="getFormControl('number')" class="lt inputw" >
              <nz-input  [nzSize]="'large'" formControlName="number" [nzId]="'number'"></nz-input>
              <div nz-form-explain *ngIf="getFormControl('number').dirty&&getFormControl('number').hasError('required')">请输入档号！</div>
            </div>
          </div>

          <div nz-form-item nz-row class="upload">
            <div nz-col [nzSpan]="3" nz-form-label>
              <label>上传附件</label>
            </div>
            <div nz-col [nzSpan]="21" nz-form-control >
              <ul class="filegroup">
                <li *ngFor="let item of fileList">
                  <img [src]="item.showurl" alt="">
                  <nz-tooltip [nzTitle]="item.name" [nzPlacement]="'bottom'">
                    <p nz-tooltip>{{item.originalname}}</p>
                  </nz-tooltip>
                  <div>
                <span>
                  <i class="anticon anticon-eye seeImg" *ngIf="item.preview!='2'" (click) = "toDos(item.preview,item.showurl,item.id,item.actualsize,item.standardsize)"></i>
                  <i [ngClass]="{'tocenter':item.preview=='2'}" class="anticon anticon-delete uploadimgremove" (click)="remove(item.id)"></i>
                </span>
                  </div>
                </li>

              </ul>
              <a style="line-height: 28px" nz-button [nzType]="'primary'" (click)="showModal('文件上传')">上传附件</a>
            </div>
          </div>
        </div>
        <div class="editBox" style="height: 500px">
          <quill-editor
            [(ngModel)]="description"
            formControlName = "description"
            [options]="editorOptions"
            (change)="onContentChanged($event)">
          </quill-editor>
        </div>
        <button class="Submit" (click)="kia()">提交</button>
      </form>
    </div>
  </div>
  <archives-foot [imgs]="false"></archives-foot>
  <nz-back-top [nzTarget]="divTarget"></nz-back-top>
</nz-spin>
<nz-modal [nzWidth]="width" [nzVisible]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)">
  <ng-template #modalTitle>
    {{names}}
  </ng-template>
  <ng-template #modalContent>
    <iframe *ngIf="names=='文件上传'" style="width: 840px;height: 380px;margin-left: 28px" [src]="src" frameborder="0"></iframe>
    <div *ngIf="names!='文件上传'" style="width: 420px;display: block;margin: 0 auto;background-color: #999" >
      <img style="width: 420px;display: block;margin: 0 auto;"  [src]="seeurl" alt="">
    </div>
  </ng-template>
</nz-modal>
